<template>
  <view class="filter-item" @click.stop="checked=!checked" ref="item">
    <view class="label">
      <span>{{label}}</span>
      <span class="title"> {{ title }}</span>
      <img src="/static/map/active.png" alt="" class="checkImg" v-if="checked">
      <slot name="label"  v-if="checked"></slot>
    </view>
    <img src="/static/map/up.png" alt="" v-if="!checked">
    <img src="/static/map/down.png" alt="" v-else>
    <slot v-if="checked"></slot>
  </view>
</template>
<script>
export default {
  props:{
    label:{
      type:String,
      default:''
    },
    title:{
      type:String,
      default:''
    }
  },
  data() {
    return {
      checked:false
    }
  }
}
</script>

<style lang="scss" scoped>
  .filter-item{
    font-size: 26rpx;
    color: #606266;
    display: flex;
    align-items: center;
    .label{
      position: relative;
      height: 94rpx;  
      white-space: nowrap;
      display: flex;
      align-items: center;
      .title{
        max-width: 150rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        margin-left: 10rpx;
      }
      span{
        line-height: 94rpx;
        
      }
    }
    img{
      width: 32rpx;
      height: 32rpx;
      margin-left: 20rpx;
    }
    .checkImg{
      width: 80rpx;
      height: 11rpx;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      margin: 0;
    }
  }
</style>